<template>
  <div class="chat-foot" id="chatFoot">
    <div class="foot-top flex">
<!--       <div class="foot-top-left">
        <img src="../../assets/images/ico/ic_m_speak.png" alt="语音">
      </div> -->
      <div class="foot-top-center">
        <input type="text" v-model="sendMsg" @input="msgChange($event)" placeholder="说点什么...">
      </div>
      <div class="foot-top-right">
<!--         <a href="javascript:"><img src="../../assets/images/ico/ic_m_emo.png" alt="表情"></a>
        <a href="javascript:" @tap="showMoreEvt" v-show="!sendBtn">
          <img src="../../assets/images/ico/ic_m_add.png" alt="更多">
        </a> -->
        <button type="button" class="mui-btn-mini mh-btn send" v-show="sendBtn" @click='sendSubmit'>发送</button>
      </div>
    </div>
    <div class="foot-bottom flex-bt" v-if="showMore">
      <a href="javascript:"><img class="pic" src="../../assets/images/ico/ic_m_pix.png" alt="图片"></a>
      <a href="javascript:"><img class="camera" src="../../assets/images/ico/ic_m_camera.png" alt="拍照"></a>
      <a href="javascript:"><img class="envelope" src="../../assets/images/ico/ic_m_envelope.png" alt="红包"></a>
      <a href="javascript:"><img class="gift" src="../../assets/images/ico/ic_m_gift.png" alt="礼物"></a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "chat-footer",
    data () {
      return {
        showMore: false,
        sendMsg: '',
        sendBtn: true
      }
    },
    computed: {

    },
    methods: {
      showMoreEvt () {
        this.showMore = !this.showMore;
        let footHeight = document.getElementById('chatFoot').offsetHeight;
        this.$emit('recalHeight', footHeight)
      },
      msgChange (event) {
        this.sendBtn = event.currentTarget.value !== '';
      },
      sendSubmit(){
        let sendMsg = this.sendMsg;
        this.$parent.send(sendMsg);
      },
      clearMsg(){
        this.sendMsg = '';
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chat-foot {
    position: fixed;
    width: 100%;

    left: 0;
    bottom: 0;
    overflow: hidden;
  }
  .foot-top {
    padding: .5rem 1rem;
    img {width: 2.5rem;}
    input {
      height: 4rem;
      margin-bottom: 0;
      border: 1px solid #999;
      border-radius: .45rem;
    }
  }
  .foot-top-center {
    flex: 1;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .foot-bottom {
    padding: 1rem 2.5rem;
    border-top: 1px solid #eee;
    .pic {
      width: 2rem;
    }
    .camera {
      width: 2.3rem;
    }
    .envelope {
      width: 1.9rem;
    }
    .gift {
      width: 2.5rem;
    }
  }
  .send {
    padding: .4rem .5rem;
  }
</style>
